import { CardContent } from "@/src/components/ui/card";
import { Card } from "@/src/components/ui/card";
import { ManageDefaultEvalModel } from "@/src/features/evals/components/manage-default-eval-model";
import { useTranslation } from "@/src/utils/i18n";

export function SetupDefaultEvalModelCard({
  projectId,
}: {
  projectId: string;
}) {
  const { t } = useTranslation();
  return (
    <Card className="mt-2 border-dark-yellow bg-light-yellow">
      <CardContent className="mt-2 flex flex-col gap-1">
        <ManageDefaultEvalModel
          projectId={projectId}
          setUpMessage={t("pages.evals.selector.setUpDefaultModel")}
          variant="color-coded"
        />
        <p className="text-xs text-dark-yellow/70">
          {t("pages.evals.selector.usesDefaultModelNote")}
        </p>
      </CardContent>
    </Card>
  );
}
